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III - Desenho de Sistemas 
Interactivos 

III. 5 - Prototipagem 

Prototyping for Tiny Fingers, Marc Rettig 
(Artigo de Interactions Abr'94) 

HCI, Cap. 5, Alan Dix 
Interaction Design, Cap. 8, 3. Preece 



Melhor e Pior ? 



a 



File Edit View Configure Window Help 



it. 
... 



x. 



\ System /\ Menu /\ u.J* X, View / 

• Mistura metaforas (Tabs + Toolbar) 

• Toolbars devem proporcionar acesso 
"single-click" a funcionalidade 

• Proposito das toolbars e tornar 
visfvel a informagao, nao esconde-la 
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Resumo da Aula Anterior 



• Desenho Visual 

- Agrupamento 

- Ordenacao 

- Decoracao 

- Alinhamento 

- Espacos em branco 

• Cor 

-Contraste e Principios 

• Texto 

- Tipos, Legibilidade, Cor, Tamanho, Espacamento 

• Escrita de Texto 

- Mensagens, Pedidos de Informagao, Instrucoes 
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Sumario 



• O que sao prototipos? 

• Porque prototipar? 

• Tipos de prototipos 

-Cenarios de Interacgao 
-Storyboards 
- PBFs e PAFs 
-Wizard of Oz 

• Como se testa um PBF? 

• Video 
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O Passo Seguinte? 



-Analise de Tarefas 
-Cenarios do Problema 



-Modelo Conceptual 
-Cenarios de Actividade 
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O que sao prototi pos? 



• Protdtipo: Implementacao concreta mas 
parcial do desenho do sistema 

• Componentes de uma IU 

- Esbocos de ecras 

- Sequencia de slides (PDF ou PPT por exemplo) 

- Video simulando o uso do sistema 

• Fisicos 

- Modelo de madeira ou plasticina (p. ex. PalmPilot) 

- Simulacra de cartao ou cartolina 

• Funcionais 

- Programa com funcionalidade limitada 
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Porque Prototipar? 



• Obter retorno sobre desenho mais depressa 

- Avaliacao + retorno centrais no desenho de IPM 

• Poupa tempo de desenvolvimento e €€ 

• Experimentar alternativas de desenho 

• Resolver problemas antes de escrever 
codigo 

• Manter desenho centrado nos utilizadores 
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Tarefas vs Funcionalidade 



• Como se poupa 

- Cortando no N° de tarefas 

- Reduzindo o nivel de funcionalidade das tarefas 

Tarefas 



Prototipus H jrizontais 



Prototip ds H : 

a 



Interface 
Completa 
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Horizontals vs Verticals 




PrOtOtipO Vertical (Corta nas tarefas) 

- Muita funcionalidade para poucas tarefas 

- Permite testar apenas uma pequena parte do 
sistema completo (ex. Usando uma BD real) 

PrOtOtipO Horizontal (Corta na funcionalidade) 

- Inclui a IU para todo o sistema, mas sem 
funcionalidade por baixo 

- E uma simulacao do sistema 

- Permite testar toda a interface 

- Permite avaliar como e que a interface encaixa 
como um todo. 
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Fidelidade na Pr ototipagem 

• Fidelidade refere-se ao nivel de detalhe 

• Alta fidelidade (PAF): 

- Prototipo assemelha-se ao produto final 



Baixa fidelidade (PBF): 

- Representacao artistica 
com muitos detalhes 
omissos 
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Cenarios de Inte raccao 

Tipos de Prototipos 

• Sao o prototipo minimalista 

• Descrevem uma unica sessao de interacgao 

- sem flexibilidade para o utilizador 

• Combinam limitagoes 

- de prototipos horizontals 

• Nao se pode interagir com dados reais (pouca funcionalidade) 

- e prototipos verticals 

• Utilizadores nao se podem mover livremente pelo 

SiStema (poucas tarefas) 
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Cenarios de Inte raccao 

Tipos de Prototipos 

• Podem ser usados para: 

- Desenho da IU 

• Perceber modo como utilizadores irao 
interagir com futuro sistema 

-Avaliar desenho inicial da IU 

• sem custos de construir um prototipo 

• Boas ferramentas nas fases iniciais do 
desenho 

- Criados e editados antes de desenhar toda a 
Interface Utilizador 
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Cenarios de Inte racgao (Ex.) 

Tipos de Prototipos 

• O Joao dirigiu-se a maquina de vender bilhetes de comboio, 
escolheu o seu destino carregando no botao fisico da 
maquina correspondente ao Porto, depois seleccionou um 
bilhete de ida e volta carregando na opcao correspondente. 
Quando Ihe apareceu um dialogo para confirmar a 
informacao introduzida, o Joao carregou no botao <OK> e 
o sistema passou para o ecra de pagamento, seleccionando 
o Joao a opcao de pagar com multibanco. O Joao passou o 
multibanco na ranhura e introduziu o PIN correspondente. 
Finalmente, o Joao carregou no botao <Recibo> para 
receber um recibo da sua operacao. 
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Storyboards 



Tipos de Prototipos 

• Complementam Cenarios de Interaccao 

• Origem: Filmes e Animacao 

• Sequencia de ecras para dar a ideia de como uma 
pessoa realiza uma dada tarefa 

• Serie de esbogos que ilustram os detalhes 
importantes 

- Detalhes irrelevantes sao suprimidos 

- Interaccoes mais importantes 
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Storyboards no Cinema 




TRACK ITi with BAD GUY** JOHN 1 '* haad ± s pul.l»d ZOOM IK on HAT} GUI 

fno-steps bacfc by GOOT in ffilhouvtt* 



• As setas ajudam a compreender a acgao 

• Texto complementa informacao 
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Storyboards no Cinema 



• Muito antes do inicio 
dasfilmagens... 
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Storyboards nas IU 




• Muito antes do inicio da codificacao 
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Storyboards nas IU 
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Silk - Video 




• James Landay 

http://www.cs.berkeley.edu/~landay/ 
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JavaSketchlt (TFC Leic) 
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Prototipos de Alta-Fidelidade 


npos ae Krototipos 


• Detalhes sao importantes (produto final) 


• Percepcoes dos reviewers / testers ? 

- Apresentacao formal sugere "produto acabado" 

• Comentarios sobre cores, tipos, arranjo grafico etc. 

• Em vez de fluxo de conversacao, termlnologia, etc. 


• Tempo ? 

- Enfase na precisao 

• Definicao de detalhes leva 
demasiado tempo. 




• Criatividade ? 
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- Perde-se a imagem de conjunto 
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Prototipos de Ba ixa-Fidelidade 

Tipos de Prototipos 

• Construidos em papel 

• Podem ser testados com utilizadores reais 

• Permitem demonstrar comportamento da 
IU muito cedo no desenvolvimento 



• Podem aumentar a qualidade das IU 

- Varias iteracoes em pouco tempo 

• Obrigam utilizadores a pensar no 
conteudo em vez da aparencia 
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PBFs vs PAFs 



• Interacgao tem duas partes 
- Look & Feel - Elementos graficos 
-Sequencia - Comportamento 
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Porque PBFs ? 



Metodos tradicionais tomam muito tempo 
■> Avaliar -> refazer 



Esbocos -> prototipo 




Pode teimular-se o prototipo 
Esbocos -> Avaliacao -> refazer 
Esbocos funcionam como prototipos 
• Voces "fazem de" computador 
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• Outros membros da equipa observam e registam 
Jogar ao faz-de-conta 

• Mesmo nao-programadores podem participar 
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Materials Basicos p/ PBF 




• Cartolina 

• Pa pel branco 

• Cartoes pequenos 

• Fita cola, cola branca, corrector 

• Marcadores de varias cores 

• Acetatos 

• Tesouras, X-actos, etc... 
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Construir o PBF 



• Definam prazos 

- Nao pensem muito - Facam! (2h: tempo tipico) 

• Desenhem uma janela em cartolina 

• Usem cartoes para representar elementos 
dinamicos (menus, caixas de dialogo, etc.) 

- Cada cartao representa um ecra ou janela 

• Antecipem as respostas do utilizador 

- Criem varios ecras, menus, dialogos, etc 

• Usem fotocopias (varias versoes) 

• Nao se preocupem muito com os detalhes 
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PBF Fisico (Gadgets) 



• Usem modelos ffsicos (esferovite, 
plasticina, cartolina) 

• Dimensoes e aspecto importantes 
-Cabe na mao ? Leve ? Pesado ? 

• Aspectos dinamicos simulados tb 
com cartolina 
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Vantagens dos PBFs 



• Toma apenas algumas horas 

-Nao requer equipamento dispendioso 

• Podem testar multiplas alternativas 
-Iteragoes rapidas 

-Quantas mais melhor 

• Melhora qualidade final 

• Praticamente qualquer interacgao 
pode ser simulada 
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Wizard of Oz 

Tipos de Prototipos 

• Sistema "Faz-de-conta" 

• Do filme "O feiticeiro de Oz" 
-O Homem atras da cortina 

• Metodo para testar sistemas que nao 
existem 

• Muito importante para caracterfsticas 
diffceis de realizar 

• Reconhecimento de escrita, e 
reconhecimento de fala 
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Wizard of Oz 



"Wizard" humano Simula as respostas do sistema 

- Interpreta as entradas do utillzador de acordo com um 
algoritmo 

- Controla o computador para similar 
as saidas apropriadas 

- Usa IU reais ou prototipos 



O que o utilizador ve 
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Pre para c;ao do Teste c/ PBF 



• Escolher potenciais utilizadores 

- Usem questionario para identificar caracterfsticas 
publico alvo 

• Preparar cenarios de utilizacao 

- Criar cenarios realistas 

- Fazer prototipo para suportar as 3 tarefas 

• Ensaiar para evitar gatos 

- "Executar" o prototipo varias vezes p/ treinar 

- Verificar se nao falta nenhum componente 

- Quern faz de "computador" nao deve ter duvidas 
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Realizagao do teste 



• Quatro (tres) participantes desejavel 

- Mestre-de-cerimonias (opcional) 

• Recebe utilizadores e coloca-os a vontade 

- Facilitador 

• Explica a interface e Conduz os testes 

• E o unico que pode falar livremente 
-Computador 

• Conhece o programa 

• Simula respostas sem dar explicates 
-Observador 

• Anota reaccoes, recomendagoes 



III.3 - Prototipagem 



Partes do Teste 



Inicio 

- Boas vindas, preenchimento de formularios, 
explicates iniciais, assegurar confidencialidade, 
etc. 



• Teste 

- Facilitador - instrucoes claras e precisas por 

escrito entregues ao utilizador 

- Facilitador extra] output do utilizador 

• O que esta a pensar agora ? Pense em voz alta, etc. 

- Observador - anota reaccoes, sugestoes, etc. 
(nao intervem) 
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Partes do Teste 



• Conclusao 

-Preencher questionario pos-avaliacao 

-Facam perguntas sobre partes que deram 

problemas 
-Obtenham impressoes 
-Agradecam aos participantes 

• Duragao da sessao 
-Cerca de uma hora 
-Inicio + Teste + Conclusao 
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Ayaliagao dos resultados 



• Ordenem e prioritizem observacoes 

- Observacoes importantes? 

- Muitos problemas na mesma area? 

• Escrevam um relatorio sobre os resultados 

- Ordem de trabalhos para reuniao sobre 
alteracoes ao desenho 

• Alterem o desenho e repitam a 
experiencia 

- Ate estarem satisfeitos 

- Ou ate nao disporem de mais tempo... 
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Storyboards vs PBFs 



• Storyboards <> PBFs !! 



• Storyboard nao tern flexibilidade 
-Obriga sempre a seguir um caminho 
pre-definido 
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Conclusdes 



• Prototipos de baixa fidelidade 
-E Facil, E Barato,... 

• Experimentem multiplas alternativas 

• Materials simples 

• Resultados ricos de informagao 

• ZERO linhas de codigo 

• ZERO Bugs para corrigir 

• Wizard-of-Oz para novas modalidades 
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Video 



Sketch Based Rapid Prototyping Pl*ir<snn 
lor Hnrnw*re Slrftwprn l*1eq«|cd 
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Proxima Aula 



• Avaliagao de Usabilidade 

• Avaliagao Heuristica 

- O que e? 

- N° de Avaliadores 

- Heun'sticas de Usabilidade 

- Fases da Av. Heuristica 

- Como relatar resultados da Av. Heur. 

• Ler HCI, Cap. 9, Alan Dix 
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